<template>
	<view>
		<view v-if="$token">
			<view class="cu-bar bg-white search">
				<button @click="onShowCategory()" class="cu-btn round line-green margin-left">
					{{activeCategory.id ? activeCategory.title : '选择舞台品类'}}
				</button>
				<view class="action">
					<view class="cu-capsule round">
						<view v-for="(item,index) in types" :key="index" @click="typeClick(item.value)"
							:class="type == item.value ? 'bg-red':''" class="cu-tag padding">{{item.name}}</view>
					</view>
				</view>
			</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption" :up="upOption">
				<view class="grid-d grid-cols-2 gap-2 padding-sm">
					<view class="cu-card no-card case" v-for="(item,index) in list" :key="index">
						<view class="cu-item shadowl">
							<view class="image" style="margin: 0;" @click="toGoods(item.id)">
								<image class="hbyw-45" :src="item.pic[0]" mode="aspectFill">
									<view class="cu-tag bg-orange">舞台</view>
							</view>
							<view class="padding-sm">
								<view class="padding-bottom-sm">{{item.title}}</view>
								<view class="flex align-center justify-between">
									<navigator hover-class="none" :url="'/pages/goods/edit?id=' + item.id"
										class="cu-btn line-green">
										编辑
									</navigator>
									<view class="flex align-center text-lg">
										<text v-if="item.like"
											class="text-red text-xs margin-right-xs">{{item.like}}</text>
										<view :class="item.like ? 'text-red':'text-gray'"
											class="lg cuIcon-appreciatefill">
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
			<view class="cu-modal drawer-modal justify-start" :class="showCategory ? 'show':''">
				<view class="cu-dialog basis-lg">
					<view class="cu-bar solid-bottom">
						<view class="action">
							舞台品类
						</view>
						<view class="action">
							<text @click="showCategory=false" class="lg text-gray cuIcon-close"></text>
						</view>
					</view>
					<view class="grid-d grid-cols-2 gap-2 padding">
						<view @click="clickCategory(item)" class="cu-tag round padding margin-left-0"
							:class="activeCategory.id == item.id ? 'bg-green':'line-grey'"
							v-for="(item,index) in categorys" :key="index">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<login v-else></login>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import GoodsApi from "@/api/goods";
	import ConfigApi from "@/api/config"
	import login from '@/pages/login/login.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		mixins: [MescrollMixin],
		components: {
			login
		},
		data() {
			return {
				mescroll: null,
				upOption: {},
				downOption: {
					use: false
				},
				list: [],
				showCategory: false,
				categorys: [],
				activeCategory: {},
				type: '',
				types: [{
					name: '全部',
					value: 0
				}, {
					name: '舞台',
					value: 1
				}, {
					name: '可售',
					value: 2
				}],
			}
		},
		mounted() {

		},
		onShow() {
			if (this.list.length == 0) {
				this.mescroll.resetUpScroll();
			}
		},
		computed: {
			...mapState(['$token'])
		},
		methods: {
			upCallback(page) {
				if (page.num == 1) {
					this.list = [];
				}
				GoodsApi.collect({
					category_id: this.activeCategory.category_id,
					type: this.type,
					page: page.num,
					page_size: page.size
				}).then((res) => {
					this.list = this.list.concat(res.data);
					this.mescroll.endBySize(res.data.length, res.total);
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			toGoods(id) {
				uni.navigateTo({
					url: '/pages/goods/goods?id=' + id
				});
			},
			clickCategory(item) {
				this.activeCategory = item
				this.showCategory = false;
				ConfigApi.add({
					key: 'home_category',
					value: item
				})
				this.mescroll.resetUpScroll();
			},
			onShowCategory() {
				this.getCategory();
				this.showCategory = true
			},
			getCategory() {
				GoodsApi.category().then((res) => {
					this.categorys = res
				})
			},
			typeClick(val) {
				this.type = val;
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>

<style scoped>
	.hbyw-45 {
		height: 45vw;
	}
</style>
